import React from 'react';
import ReactDOM from 'react-dom';
import { observable, action } from 'mobx';

var appState = observable({
    timer: 0
});

appState.resetTimer = action(function reset() {
    appState.timer = 0;
});

setInterval(action(function tick() {
    appState.timer += 1;
}), 1000);

import { observer } from 'mobx-react';

@observer
class TimerView extends React.Component {
    render() {
        return (<button onClick={this.onReset.bind(this)}>
            Seconds passed: {this.props.appState.timer}
        </button>);
    }

    onReset() {
        this.props.appState.resetTimer();
    }
};

// 不使用router，只是展示一个默认的界面
const render = () => {
    ReactDOM.render(<TimerView appState={appState} />, document.getElementById('root'));
};



// //使用router
// const render = () => {
//     console.log(store)
//     ReactDOM.render(
//         <Provider store={store}>
//             <Routers />
//         </Provider>, document.getElementById('root')
//     );
// };


render();
